<template>
	<view class="container">
		<topTitle :windowWidth="`${windowWidth}`" backgroundColor="#fff">
			<template #content>
				<!-- 搜索框 -->
				<view class="search-bar">
					<view class="icon-box">
						<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick">
							<template>
								<view style="display: flex;
								align-items: center;justify-content: center;">
									<image src="/static/logo.png" mode="aspectFit" class="search-icon"></image>
								</view>
							</template>
						 </uni-datetime-picker>
					</view>
					<view class="navbar-search">
						<view class="navbar-search_icon">
							<uni-icons type="search" size="16" color="#999"></uni-icons>
						</view>
						<view class="navbar-serach">
							<input class="navbar-search_text" type="text" confirm-type="搜索" v-model="keywords"
								placeholder="请输入订单编号" @confirm="confirm" />
						</view>
					</view>
					<view class="icon-box" @click="searchQrClick">
						<image src="/static/logo.png" mode="aspectFit" class="search-qr"></image>
					</view>
				</view>

				<!-- 				<view style="width: 100%;display: flex;align-items: center;">
					<image src="/static/logo.png" mode="aspectFit" class="avatar-top"></image>
					<view style="margin: 0 20rpx;font-size: 32rpx;color: #fff;">
						欢迎您，
						<text>18888888888</text>
					</view>
				</view> -->
			</template>
		</topTitle>


		<!-- 状态筛选栏 -->
		<scroll-view scroll-x style="width: 100%;padding: 0 30rpx;background-color: #fff;
		overflow: hidden;box-sizing: border-box;">
			<view class="status-filter">
				<view class="status-item" @click="currentStatus = item.status" v-for="(item, index) in orderStatusList"
					:class="currentStatus == item.status?'active':''">{{item.name}}</view>
			</view>
		</scroll-view>

		<!-- 订单列表 -->
		<scroll-view scroll-y style="height: 0;flex: 1;">
			<view class="order-list">
				<!-- 订单项 -->
				<view class="order-item" v-for="(order, index) in orders" :key="index">
					<view class="order-header">
						<text class="order-id">订单编号：{{ order.orderId }}</text>
						<text class="order-status">{{ order.status }}</text>
					</view>

					<view class="order-content">
						<view class="order-image">
							<image src="/static/logo.png" mode="aspectFit"></image>
							️
						</view>
						<view class="order-info">
							<text class="order-name">商品名称</text>
							<view class="order-details">
								<text class="order-id-detail">商品ID</text>
							</view>
							<view class="order-stats">
								<text class="commission">佣金比例：50%</text>
								<text class="income">预估收入：
									<text style="color: #000;">
										<text>¥</text>
										<text style="font-weight: bold;font-size: 32rpx;">20.00</text>
									</text>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<uni-popup ref="searchTypeRef" type="bottom" backgroundColor="#fff"
		borderRadius="30rpx 30rpx 0 0">
			<view class="popup-content">
				<view class="popup-top">
					<view class="top-title">搜索类型</view>
					<uni-icons type="closeempty" size="38rpx" color="#999"
						class="top-right" @click="$refs.searchTypeRef.close()"></uni-icons>
				</view>
				<view class="select-content">
					<view v-for="(item, index) in searchType" :key="item.id"
					class="select-item" :class="currentSearchType == item.id?'active':''"
					@click="searchTypeClick(item)">{{item.name}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				range: [],
				// #ifdef MP
				windowWidth: app.globalData.windowWidth + "px",
				// #endif
				// #ifndef MP
				windowWidth: '100%',
				// #endif
				currentStatus: 0,
				keywords: '',
				orderStatusList: [{
						id: 1,
						name: "全部",
						status: 0,
					},
					{
						id: 2,
						name: "待发货",
						status: 1,
					},
					{
						id: 3,
						name: "已发货",
						status: 2,
					},
					{
						id: 4,
						name: "已收货",
						status: 3,
					},
					{
						id: 5,
						name: "已完成",
						status: 4,
					},
					{
						id: 6,
						name: "退款",
						status: 5,
					},
				],

				orders: [{
						orderId: '202501364391486354005200',
						status: '待发货'
					},
					{
						orderId: '202501364391486354005200',
						status: '已发货'
					},
					{
						orderId: '202501364391486354005200',
						status: '已收货'
					},
					{
						orderId: '202501364391486354005200',
						status: '已完成'
					},
					{
						orderId: '202501364391486354005200',
						status: '退款中'
					},
					{
						orderId: '202501364391486354005200',
						status: '退款完成'
					}
				],
				searchType: [
					{
						id: 1,
						name: "达人ID"
					},
					{
						id: 2,
						name: "达人名称"
					}
				],
				currentSearchType: 1
			}
		},
		mounted() {
			// this.$nextTick(() => {
			// 	this.$refs.searchTypeRef.open()
			// })
		},
		methods: {
			searchTypeClick(e) {
				this.currentSearchType = e.id
				this.$refs.searchTypeRef.close()
			},
			searchQrClick() {
				this.$refs.searchTypeRef.open()
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	/* 搜索框 */
	.search-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		// padding: 20rpx;
		background-color: white;
		position: relative;
	}

	.icon-box {
		border-radius: 50%;
		width: 45rpx;
		height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.search-icon {
			width: 35rpx;
			height: 35rpx;
		}

		.search-qr {
			width: 35rpx;
			height: 35rpx;
		}
	}

	.navbar-search {
		display: flex;
		align-items: center;
		padding: 0 10px;
		width: 100%;
		height: 30px;
		border-radius: 50rpx;
		background-color: #f5f5f5;
		margin: 0 20rpx;
		flex: 1;

		.navbar-search_icon {
			// width: 10px;
			// height: 10px;
			margin-right: 10px;
		}

		.navbar-search_text {
			width: 100%;
			font-size: 24rpx;
			color: #000;
		}
	}

	// &.search {
	// 	padding-left: 0;

	// 	.navbar-content__search-icons {
	// 		margin-left: 10px;
	// 		margin-right: 10px;
	// 	}

	// 	.navbar-search {
	// 		border-radius: 5px;
	// 	}
	// }

	/* 状态筛选栏 */
	.status-filter {
		display: flex;
		padding: 20rpx 0;
		background-color: white;
		width: 100%;
		white-space: nowrap;
	}

	.status-item {
		margin-right: 80rpx;
		color: #999;
		font-size: 28rpx;
	}

	.status-item:last-child {
		margin-right: 0;
	}

	.status-item.active {
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
	}

	.status-item.active::before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		border: solid transparent 5rpx;
		border-bottom: solid #0069ff 5rpx;

		width: 30rpx;
		height: 30rpx;

		position: absolute;
		top: 18rpx;
		left: 50%;
		transform: translateX(-50%);
		opacity: .5;
	}

	/* 订单列表 */
	.order-list {
		margin: 30rpx;

	}

	.order-item {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;


	}

	.order-id {
		color: #999;
		font-size: 24rpx;
	}

	.order-status {
		color: #609DF7;
	}

	.order-content {
		display: flex;
		padding: 20rpx;
		background-color: white;
		border-top: 1px solid #f5f5f5;
	}

	.order-image {
		margin-right: 30rpx;

		image {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.order-info {
		flex: 1;

	}

	.order-name {
		font-size: 32rpx;
	}

	.order-details {
		display: flex;
		margin: 20rpx 0;
	}

	.order-id-detail {
		color: #999;
		font-size: 24rpx;
	}

	.order-stats {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.commission {
		color: #999;
		font-size: 24rpx;
	}

	.income {
		font-size: 24rpx;
		color: #999;
	}
	
	.popup-content {
		padding: 0 30rpx;
		.popup-top {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			
			.top-title {
				font-size: 32rpx;
			}
			.top-right {
				position: absolute;
				right: 0;
			}
		}
		
		.select-content {
			// padding: 20rpx 0;
			.select-item {
				padding: 35rpx 0;
				border-bottom: 1rpx solid #eee;
				position: relative;
				font-size: 28rpx;
			}
			.select-item:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
			.active {
				color: #0069ff;
			}
			.active::after {
				content: '√';
				position: absolute;
				top: 50%;
				right: 0;
				width: 55rpx;
				height: 55rpx;
				transform: translate(0, -50%);
				// background: url('/static/my/account/detailedInquiry/detailsPrinted/select-yes.png') no-repeat center center/contain;
				
			}
		}
	}

	
	/deep/ .uni-popup__wrapper {
		// #ifdef H5
		padding-bottom: calc(var(--window-bottom) + 20px);
		// #endif
		
	}
</style>